<template>
  <div>
    <header class="site-header jumbotron">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <h1 align="center">小可爱的聊天室</h1>
          </div>
        </div>
      </div>
    </header>
    <div class="container">
      <Add :addComment="addComment"/>
      <List :comments="comments" :deleteComment="deleteComment"/>
    </div>
  </div>
</template>

<script>
  import Add from './components/Add.vue'
  import List from './components/List.vue'
  export default {
    data(){
      return{
        comments:[//数据在哪个组件，更新数据的行为就应该定义在哪个组件
          {
            name:'xiaokeai',
            content:'xiaokeai你好啊'
          },
          {
            name:'baobao',
            content:'baobao你好啊'
          },
          {
            name:'meimei',
            content:'meimei你好啊'
          }
        ]
      }
    },
    methods:{
         addComment(comment){
           //添加到comments数组的最前面
           this.comments.unshift(comment)
         },
         deleteComment(index){
           this.comments.splice(index,1)
         }

    },
    components:{
      Add,
      List
    }
  }
</script>

<style>

</style>
